<template>
  <div class="bg-white p-4 rounded-lg shadow-sm mb-4">
    <el-form
        :inline="true"
        :model="searchForm"
        class="mb-4"
    >
      <el-form-item
          v-for="field in searchFields"
          :key="field.prop"
          :label="field.label"
      >
        <el-input
            v-if="field.type === 'input'"
            v-model="searchForm[field.prop]"
            placeholder="请输入"
            clearable
        />

        <el-select
            v-else-if="field.type === 'select'"
            v-model="searchForm[field.prop]"
            placeholder="请选择"
            :style="{ width: '200px' }"
        >
          <el-option
              v-for="option in field.options"
              :key="option.value"
              :label="option.label"
              :value="option.value"
          />
        </el-select>

        <el-date-picker
            v-else-if="field.type === 'date-range'"
            v-model="searchForm[field.prop]"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
        />
      </el-form-item>
    </el-form>

    <div class="btnseacch">
      <div v-if="searchFields.length>0">
        <el-button @click="resetForm">&nbsp;&nbsp;&nbsp;&nbsp;重置&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
        <el-button type="primary" @click="handleSearch">&nbsp;&nbsp;&nbsp;&nbsp;搜索&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
      </div>

      <div>
        <el-button type="primary" @click="addRow">&nbsp;&nbsp;&nbsp;&nbsp;新增&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
        <el-button v-if="props.deletSome" type="primary"  @click="deletSome">批量删除</el-button>
      </div>
    </div>

  </div>
</template>

<script setup>
import { defineProps, defineEmits, reactive, toRefs } from 'vue';

const props = defineProps({
  searchFields: {
    type: Array,
    required: true,
  },
  deletSome:{
    type: Boolean,
    default: false,
  }
});

const emits = defineEmits(['search', 'reset']);

// 搜索表单
const searchForm = reactive({});

// 初始化搜索表单
const initSearchForm = () => {
  props.searchFields.forEach(field => {
    searchForm[field.prop] = '';
  });
};

// 处理搜索
const handleSearch = () => {
  emits('search', { ...searchForm });
};
function addRow() {
  emits('addRow', "add");
}
// 重置表单
const resetForm = () => {
  initSearchForm();
  emits('reset');
};

function deletSome() {
  emits('deletSome');
}
// 初始化表单
initSearchForm();
</script>

<style scoped>
.el-form-item {
  margin-right: 20px;
}
.btnseacch{
  display: flex;
  justify-content: space-between;
}
</style>
